<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="decorationColors" />
            <div class="title">
              <span class="title-text">{{ title }}</span>
              <!-- <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" /> -->
            </div>
            <dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColors" />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="react-right bg-color-blue mr-3" @click="shou">
              <span class="text fw-b">数据监控</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao">
              <span class="text fw-b">政务办理</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao2">
              <span class="text fw-b">事项办理</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao3">
              <span class="text fw-b">诉求治理</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao4">
              <span class="text fw-b">调节分析</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao5">
              <span class="text fw-b">新媒体监管</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao6">
              <span class="text fw-b">新媒体监管11</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao7">
              <span class="text fw-b">服务大厅</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao8">
              <span class="text fw-b">服务办件</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao9">
              <span class="text fw-b">交易政务</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao10">
              <span class="text fw-b">服务办理</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao11">
              <span class="text fw-b">督查考核</span>
            </div>
          </div>
        </div>

        <div class="body-box">

          <!-- <router-view></router-view> -->
          <!-- 第三行数据 -->
          <div class="content-box">

            <!-- 左边 -->
            <div style="width: 600px; height: 950px;">

              <!-- 左边1 -->
              <div>
                <dv-border-box-12 style="width: 600px; height: 200px;">
                  <div class="stats-wrapper">
                    <div class="stats-container">
                      <!-- 标题区域 -->
                      <div class="header">
                        <div class="diamond"></div>
                        <h3>累计办件量</h3>
                      </div>

                      <!-- 数据卡片区域 -->
                      <div class="cards-wrapper">
                        <div class="stat-card">
                          <div class="card-title">今日办件数</div>
                          <div class="card-value">438 <span class="unit">件</span></div>
                        </div>

                        <div class="stat-card">
                          <div class="card-title">当月办件数</div>
                          <div class="card-value">4358 <span class="unit">件</span></div>
                        </div>

                        <div class="stat-card">
                          <div class="card-title">全年办件总数</div>
                          <div class="card-value">345795 <span class="unit">件</span></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </dv-border-box-12>
              </div>

              <!-- 左边2 -->
              <div>
                <dv-border-box-12 style="width: 600px; height: 210px;">
                  <div class="window-stat-container">
                    <!-- 标题区域 -->
                    <div class="stat-header">
                      <div class="diamond-mark"></div>
                      <h3 class="stat-title">窗口办件统计</h3>
                    </div>

                    <!-- 环形图表容器 -->
                    <div class="stat-charts">
                      <!-- 受理数量环形图 -->
                      <div class="chart-unit">
                        <div class="circle-outer">
                          <!-- 环形背景 -->
                          <div class="circle-bg"></div>
                          <!-- 黄色进度环 -->
                          <div class="circle-progress yellow-ring"></div>
                          <!-- 中心文字 -->
                          <div class="circle-inner">
                            <p class="circle-desc">受理数量</p>
                            <p class="circle-number">3565</p>
                          </div>
                        </div>
                      </div>

                      <!-- 办结数量环形图 -->
                      <div class="chart-unit">
                        <div class="circle-outer">
                          <!-- 环形背景 -->
                          <div class="circle-bg"></div>
                          <!-- 紫色进度环 -->
                          <div class="circle-progress purple-ring"></div>
                          <!-- 中心文字 -->
                          <div class="circle-inner">
                            <p class="circle-desc">办结数量</p>
                            <p class="circle-number">3013</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </dv-border-box-12>
              </div>

              <!-- 左边3 -->
              <div>
                <dv-border-box-12 style="width: 600px; height: 280px;">
                  <div class="monthly-workload-container">
                    <!-- 标题区域 -->
                    <div class="workload-header">
                      <div class="diamond-icon"></div>
                      <h3 class="workload-title">年度每月办件量</h3>
                    </div>

                    <!-- ECharts图表容器 -->
                    <div class="workload-chart" id="aaa"></div>
                  </div>
                </dv-border-box-12>
              </div>

              <!-- 左边4 -->
              <div>
                <dv-border-box-12 style="width: 600px; height: 240px;">
                  <div class="annual-workload-table">
                    <!-- 标题区域 -->
                    <div class="table-header">
                      <div class="diamond-sign"></div>
                      <h3 class="table-title">年度每月办件量</h3>
                    </div>

                    <!-- 表格容器 -->
                    <div class="table-container">
                      <table class="workload-table">
                        <!-- 表头 -->
                        <thead>
                          <tr class="table-header-row">
                            <th>办件编号</th>
                            <th>受理部门</th>
                            <th>项目名称</th>
                            <th>受理时间</th>
                            <th>完成时间</th>
                            <th>办件状态</th>
                          </tr>
                        </thead>

                        <!-- 表体 -->
                        <tbody>
                          <tr class="table-body-row" v-for="(item, index) in tableData" :key="index">
                            <td>{{ item.id }}</td>
                            <td>{{ item.department }}</td>
                            <td>{{ item.project }}</td>
                            <td>{{ item.acceptTime }}</td>
                            <td>{{ item.finishTime }}</td>
                            <td class="status-cell">{{ item.status }}</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </dv-border-box-12>
              </div>


            </div>

            <!-- 中间 -->
            <div style="width: 600px;height: 950px; margin-left: 30px;">
              <!--中间1  -->
              <div>
                <dv-border-box-12 style="width: 600px; height: 200px;">
                  <div class="stats-wrapper">
                    <div class="stats-container">
                      <!-- 标题区域 -->
                      <div class="header">
                        <div class="diamond"></div>
                        <h3>窗口排队取号情况</h3>
                      </div>

                      <!-- 数据卡片区域 -->
                      <div class="cards-wrapper">
                        <div class="stat-card" style="margin-right: 10px;">
                          <div class="card-title">取号人数</div>
                          <div class="card-value">26 <span class="unit">件</span></div>
                        </div>

                        <div class="stat-card" style="margin-right: 10px;">
                          <div class="card-title">等待人数</div>
                          <div class="card-value">24 <span class="unit">件</span></div>
                        </div>

                        <div class="stat-card" style="margin-right: 10px;">
                          <div class="card-title">平均办理时长</div>
                          <div class="card-value">14 <span class="unit">min</span></div>
                        </div>

                        <div class="stat-card" style="margin-right: 10px;">
                          <div class="card-title">平均等待时长</div>
                          <div class="card-value">9 <span class="unit">min</span></div>
                        </div>

                      </div>
                    </div>
                  </div>
                </dv-border-box-12>
              </div>

              <!-- 中间2 -->
              <div>
                <dv-border-box-12 style="width: 600px; height: 355px;">
                  <div class="ticket-trend-container">
                    <!-- 标题区域 -->
                    <div class="trend-header">
                      <div class="diamond-indicator"></div>
                      <h3 class="trend-title">取号趋势分布统计</h3>
                    </div>

                    <!-- ECharts图表容器 -->
                    <div class="trend-chart" id="bbb"></div>
                  </div>

                </dv-border-box-12>
              </div>

              <!-- 中间3 -->
              <div>
                <dv-border-box-12 style="width: 600px; height: 375px;">
                  <div class="hall-realtime-container">
                    <!-- 标题区域 -->
                    <div class="realtime-header">
                      <div class="diamond-marker"></div>
                      <h3 class="realtime-title">大厅实时运行明细分析</h3>
                    </div>

                    <!-- 表格容器（带滚动） -->
                    <div class="table-scroll-wrapper">
                      <table class="realtime-table">
                        <!-- 表头 -->
                        <thead>
                          <tr class="table-head-row">
                            <th>窗口</th>
                            <th>业务名称</th>
                            <th>当前办理号</th>
                            <th>等待人数</th>
                          </tr>
                        </thead>

                        <!-- 表体 -->
                        <tbody>
                          <tr class="table-body-row" v-for="(item, index) in tableData1" :key="index">
                            <td>{{ item.window }}</td>
                            <td class="business-name">{{ item.business }}</td>
                            <td>{{ item.number }}</td>
                            <td :class="{ 'warning-count': item.wait > 5 }">{{ item.wait }}</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </dv-border-box-12>
              </div>

            </div>

            <!-- 右边 -->
            <div style="width: 600px; height: 950px; margin-left: 30px;">
              <!-- 右边1 -->
              <div>
                <dv-border-box-12 style="width: 600px; height: 200px;">
                  <div class="stats-wrapper">
                    <div class="stats-container">
                      <!-- 标题区域 -->
                      <div class="header">
                        <div class="diamond"></div>
                        <h3>延时预约服务情况</h3>
                      </div>

                      <!-- 数据卡片区域 -->
                      <div class="cards-wrapper">
                        <div class="stat-card">
                          <div class="card-title">本周延时预约数</div>
                          <div class="card-value">418 </div>
                        </div>

                        <div class="stat-card">
                          <div class="card-title">本月延时预约数</div>
                          <div class="card-value">5239 </div>
                        </div>

                        <div class="stat-card">
                          <div class="card-title">本年延时预约数</div>
                          <div class="card-value">245676 </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </dv-border-box-12>
              </div>
              <!-- 右边2 -->
              <div>
                <dv-border-box-12 style="width: 600px; height: 200px;">
                  <div class="satisfaction-container">
                    <!-- 标题区域 -->
                    <div class="satisfaction-header">
                      <div class="diamond-symbol"></div>
                      <h3 class="satisfaction-title">本年服务满意度情况</h3>
                    </div>

                    <!-- 满意度内容区域 -->
                    <div class="satisfaction-content">
                      <!-- 平均满意率 -->
                      <div class="avg-satisfaction">
                        <div class="rate-value">97.87%</div>
                        <div class="rate-label">平均满意率</div>
                      </div>

                      <!-- 满意度分布 -->
                      <div class="satisfaction-distribution">
                        <!-- 分布点和连接线 -->
                        <div class="distribution-line">
                          <!-- 连接线 -->
                          <div class="connecting-line"></div>

                          <!-- 五个满意度节点 -->
                          <div class="distribution-point" :style="{ backgroundColor: '#38c172' }">
                            <div class="point-value">1234</div>
                            <div class="point-label">非常满意</div>
                          </div>

                          <div class="distribution-point" :style="{ backgroundColor: '#4dc0b5' }">
                            <div class="point-value">123</div>
                            <div class="point-label">满意</div>
                          </div>

                          <div class="distribution-point" :style="{ backgroundColor: '#f6c343' }">
                            <div class="point-value">123</div>
                            <div class="point-label">基本满意</div>
                          </div>

                          <div class="distribution-point" :style="{ backgroundColor: '#9f7aea' }">
                            <div class="point-value">12</div>
                            <div class="point-label">不满意</div>
                          </div>

                          <div class="distribution-point" :style="{ backgroundColor: '#e53e3e' }">
                            <div class="point-value">9</div>
                            <div class="point-label">非常不满意</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </dv-border-box-12>
              </div>

              <!-- 右边3 -->
              <div>
                <dv-border-box-12 style="width: 600px; height: 330px;">
                  <div class="performance-ranking-container">
                    <!-- 标题区域 -->
                    <div class="ranking-header">
                      <div class="diamond-badge"></div>
                      <h3 class="ranking-title">上月各窗口绩效考核排名</h3>
                    </div>

                    <!-- 排名列表 -->
                    <div class="ranking-list">
                      <div class="ranking-item" v-for="(item, index) in rankingData" :key="index">
                        <!-- 排名序号 -->
                        <div class="rank-number" :style="{ backgroundColor: getRankColor(index) }">
                          {{ index + 1 }}
                          <div class="rank-label">TOP</div>
                        </div>

                        <!-- 详情内容 -->
                        <div class="rank-details">
                          <div class="window-info">窗口：{{ item.window }}</div>
                          <div class="dept-info">部门：{{ item.department }}</div>
                          <div class="score-info">考核分数：{{ item.score }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </dv-border-box-12>
              </div>

              <!-- 右边4 -->
              <div>
                <dv-border-box-12 style="width: 600px; height: 200px;">
                     <div class="excellent-staff-container">
    <!-- 标题区域 -->
    <div class="staff-header">
      <div class="diamond-emblem"></div>
      <h3 class="staff-title">上月优秀员工</h3>
    </div>
    
    <!-- 员工列表 -->
    <div class="staff-list">
      <div class="staff-card" v-for="(staff, index) in staffData" :key="index">
        <!-- 员工头像 -->
        <div class="staff-avatar" :style="{ backgroundImage: `url(${staff.avatar})` }"></div>
        
        <!-- 员工信息 -->
        <div class="staff-info">
          <div class="dept-text">部门：{{ staff.department }}</div>
          <div class="id-text">工号：{{ staff.id }}</div>
          <div class="name-text">姓名：{{ staff.name }}</div>
        </div>
      </div>
    </div>
  </div>
                </dv-border-box-12>
              </div>

              
            </div>


          </div>

        </div>


      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onUnmounted,
} from 'vue'
import { formatTime } from '@/utils/index'
import { WEEK } from '@/constant/index'
import useDraw from '@/utils/useDraw'
import { title, subtitle, moduleInfo } from '@/constant/index'
import CenterLeft1 from '../centerLeft1/index.vue'
import CenterLeft2 from '../centerLeft2/index.vue'
import Center from '../center/index.vue'
import CenterRight1 from '../centerRight1/index.vue'
import CenterRight2 from '../centerRight2/index.vue'
import BottomLeft from '../bottomLeft/index.vue'
import BottomRight from '../bottomRight/index.vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts';


export default defineComponent({
  components: {
    CenterLeft1,
    CenterLeft2,
    Center,
    CenterRight1,
    CenterRight2,
    BottomLeft,
    BottomRight,
  },
  setup() {
    // 左边4
    const tableData = ref([
      { id: '001', department: '部门一', project: '项目A', acceptTime: '01/01', finishTime: '01/02', status: '办结' },
      { id: '002', department: '部门二', project: '项目B', acceptTime: '01/01', finishTime: '01/02', status: '办结' },
      { id: '003', department: '部门三', project: '项目C', acceptTime: '01/01', finishTime: '01/02', status: '办结' },

    ]);

    // 中间3
    // 表格数据
    const tableData1 = ref([
      { window: '1号窗口', business: '这里是业务名称...', number: 'A0001', wait: 0 },
      { window: '2号窗口', business: '这里是业务名称...', number: 'A0002', wait: 2 },
      { window: '3号窗口', business: '这里是业务名称...', number: 'A0003', wait: 3 },
      { window: '1号窗口', business: '这里是业务名称...', number: 'A0004', wait: 0 },
      { window: '4号窗口', business: '这里是业务名称...', number: 'A0005', wait: 6 },
      { window: '1号窗口', business: '这里是业务名称...', number: 'A0006', wait: 0 },
      { window: '2号窗口', business: '这里是业务名称...', number: 'A0007', wait: 11 },
      { window: '3号窗口', business: '这里是业务名称...', number: 'A0008', wait: 0 },
      { window: '1号窗口', business: '这里是业务名称...', number: 'A0009', wait: 2 },
      { window: '4号窗口', business: '这里是业务名称...', number: 'A0011', wait: 3 }
    ]);

    // 右边3的数据
    // 排名数据
    const rankingData = ref([
      { window: '1号窗口', department: '这是部门名称', score: '10分' },
      { window: '2号窗口', department: '这是部门名称', score: '9分' },
      { window: '3号窗口', department: '这是部门名称', score: '8.8分' },
      { window: '2号窗口', department: '这是部门名称', score: '8.7分' },
      { window: '3号窗口', department: '这是部门名称', score: '7分' }
    ]);

    // 获取排名对应的背景色
    const getRankColor = (index) => {
      // 前五名使用不同深度的蓝色
      const colors = [
        '#0052cc', // 第1名
        '#0065ff', // 第2名
        '#2185d0', // 第3名
        '#4299e1', // 第4名
        '#63b3ed'  // 第5名
      ];
      return colors[index] || '#63b3ed';
    };

    // 右边4
    // 优秀员工数据
const staffData = ref([
  { 
    avatar: 'https://picsum.photos/id/1012/100/100', // 替换为实际头像地址
    department: '部门一', 
    id: '00001', 
    name: '张三' 
  },
  { 
    avatar: 'https://picsum.photos/id/1005/100/100',
    department: '部门一', 
    id: '00002', 
    name: '李四' 
  },
  { 
    avatar: 'https://picsum.photos/id/1027/100/100',
    department: '部门一', 
    id: '00004', 
    name: '老六' 
  },
  { 
    avatar: 'https://picsum.photos/id/1074/100/100',
    department: '部门一', 
    id: '00004', 
    name: '周中' 
  }
]);

    // 生命周期
    onMounted(() => {
      cancelLoading()
      handleTime()
      // todo 屏幕适应
      windowDraw()
      calcRate()

      // 左边3
      // 初始化图表
      setTimeout(() => {
        // 左边3的图形
        var chartDom = document.getElementById('aaa');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            top: '15%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
              }
            },
            axisLabel: {
              color: 'rgba(255, 255, 255, 0.7)',
              fontSize: 10
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
              }
            },
            axisLabel: {
              color: 'rgba(255, 255, 255, 0.7)',
              fontSize: 10
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)',
                type: 'dashed'
              }
            }
          },
          series: [
            {
              data: [150, 90, 147, 93, 130, 80, 110, 78, 100, 127, 180, 112],
              type: 'bar',
              barWidth: '60%',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#50b4ff' },
                  { offset: 1, color: '#3182ce' }
                ])
              },
              label: {
                show: true,
                position: 'top',
                color: '#50b4ff',
                fontSize: 10
              }
            }
          ]
        };

        option && myChart.setOption(option);


      }, 500);

      // 中间2的图表
      setTimeout(() => {
        // 中间2
        var chartDom = document.getElementById('bbb');
        var myChart = echarts.init(chartDom);
        var option;

        option = {


          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', "15:00", "16:00"],
              axisLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                }
              },
              axisLabel: {
                color: '#ffffff',
                fontSize: 10
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                }
              },
              axisLabel: {
                color: '#ffffff',
                fontSize: 10
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.1)',
                  type: 'dashed'
                }
              }
            }
          ],
          series: [
            {
              name: '取号量',
              type: 'line',
              stack: 'Total',
              lineStyle: {
                color: '#ffffff',
                width: 2
              },
              itemStyle: {
                color: '#ffffff'
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(255, 255, 255, 0.6)' },
                  { offset: 1, color: 'rgba(255, 255, 255, 0.1)' }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [700, 800, 500, 600, 200, 500, 280, 350, 800]
            }
          ]
        };

        option && myChart.setOption(option);
      }, 500);

    })

    // * tab切换 颜色背景改变
    const lastChar = location.href.substr(location.href.length - 1)
    const tabColor = ref(lastChar)
    // * 颜色
    const decorationColors = ['#568aea', '#000000']
    // * 加载标识
    const loading = ref<boolean>(true)
    // * 时间内容
    const timeInfo = reactive({
      setInterval: 0,
      dateDay: '',
      dateYear: '',
      dateWeek: ''
    })

    const router = useRouter()
    //路由跳转
    const shou = () => {
      router.push("/")
      console.log("跳转成功");
    }

    const tiao = () => {
      router.push("/wzh2")
      console.log("跳转成功");
    }

    const tiao2 = () => {
      router.push("/wzh3")
    }

    const tiao3 = () => {
      router.push("/sjk")
    }

    const tiao4 = () => {
      router.push("/sjk1")
    }
    const tiao5 = () => {
      router.push("/sjk2")
    }
    const tiao6 = () => {
      router.push("/mhr1")
    }
    const tiao7 = () => {
      router.push("/mhr2")
    }
    const tiao8 = () => {
      router.push("/mhr3")
    }
    const tiao9 = () => {
      router.push("/st1")
    }
    const tiao10 = () => {
      router.push("/st2")
    }
    const tiao11 = () => {
      router.push("/st3")
    }

    // * 适配处理
    const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()


    onUnmounted(() => {
      unWindowDraw()
      clearInterval(timeInfo.setInterval)
    })

    //点击颜色切换  路由跳转
    const tab = (index) => {
      // console.log(index)
      tabColor.value = index
      router.push(`/tab${index}`)
    }

    // methods
    // todo 处理 loading 展示
    const cancelLoading = () => {
      setTimeout(() => {
        loading.value = false
      }, 500)
    }

    // todo 处理时间监听
    const handleTime = () => {
      timeInfo.setInterval = setInterval(() => {
        const date = new Date()
        timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
        timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
        timeInfo.dateWeek = WEEK[date.getDay()]
      }, 1000)
    }

    // return
    return {
      loading,
      timeInfo,
      appRef,
      title,
      subtitle,
      moduleInfo,
      tabColor,
      tab,
      tiao,
      tiao2,
      shou,
      tiao3,
      tiao4,
      tiao5,
      tiao6,
      tiao7,
      tiao8,
      tiao9,
      tiao10,
      tiao11,
      tableData,
      tableData1,
      rankingData,
      getRankColor,
      staffData
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';

//  左边1的样式
/* 主容器 - 固定宽高600x200 */
.stats-container {
  width: 600px;
  height: 200px;
  // background-color: #0a2463;
  padding: 20px;
  box-sizing: border-box;
  /* 确保padding不影响总尺寸 */
}

/* 标题区域 */
.header {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

/* 菱形图标 */
.diamond {
  width: 14px;
  height: 14px;
  background-color: #38b2ac;
  transform: rotate(45deg);
  margin-right: 10px;
}

.header h3 {
  color: #38b2ac;
  font-size: 18px;
  margin: 0;
  font-weight: 500;
}

/* 卡片容器 */
.cards-wrapper {
  display: flex;
  justify-content: space-between;
  height: calc(100% - 55px);
  /* 减去标题区域高度 */
}

/* 单个卡片样式 */
.stat-card {
  width: 180px;
  border: 1px solid #3182ce;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}

/* 卡片标题 */
.card-title {
  color: #90cdf4;
  font-size: 14px;
  margin-bottom: 10px;
}

/* 数值样式 */
.card-value {
  color: #4fd1c5;
  font-size: 22px;
  font-weight: 600;
}

/* 单位样式 */
.unit {
  font-size: 14px;
  color: #90cdf4;
  margin-left: 5px;
  font-weight: normal;
}

// 左边2的样式
/* 主容器 - 固定尺寸 */
.window-stat-container {
  width: 600px;
  height: 230px;
  // background-color: #0a194c;
  padding: 22px;
  box-sizing: border-box;
}

/* 标题区域 */
.stat-header {
  display: flex;
  align-items: center;
  margin-bottom: 28px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(80, 180, 255, 0.2);
}

/* 菱形图标 */
.diamond-mark {
  width: 13px;
  height: 13px;
  background-color: #50b4ff;
  transform: rotate(45deg);
  margin-right: 9px;
}

.stat-title {
  color: #50b4ff;
  font-size: 17px;
  margin: 0;
  font-weight: 500;
}

/* 图表容器 */
.stat-charts {
  display: flex;
  justify-content: space-evenly;
  height: calc(100% - 60px);
  align-items: center;
}

/* 单个图表单元 */
.chart-unit {
  width: 170px;
  height: 170px;
  position: relative;
}

/* 环形外层容器 */
.circle-outer {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 环形背景 */
.circle-bg {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  border: 7px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}

/* 进度环基础样式 */
.circle-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  border: 7px solid transparent;
  box-sizing: border-box;
  transform: rotate(-45deg);
}

/* 黄色进度环（受理数量） */
.yellow-ring {
  border-top-color: #f2c94c;
  border-right-color: #f2c94c;
  border-bottom-color: #f2c94c;
}

/* 紫色进度环（办结数量） */
.purple-ring {
  border-top-color: #b794f4;
  border-right-color: #b794f4;
}

/* 中心文字区域 */
.circle-inner {
  position: absolute;
  top: 45%;
  left: 40%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 110px;
}

/* 描述文字 */
.circle-desc {
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  margin: 0 30 0px 0;
}

/* 数字 */
.circle-number {
  color: #50b4ff;
  font-size: 21px;
  font-weight: 600;
  margin: 0;
}

// 左边3的样式
/* 主容器 - 固定尺寸 */
.monthly-workload-container {
  width: 600px;
  height: 300px;
  // background-color: #0a1e4c;
  padding: 18px 20px;
  box-sizing: border-box;
}

/* 标题区域 */
.workload-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(80, 180, 255, 0.2);
}

/* 菱形图标 */
.diamond-icon {
  width: 12px;
  height: 12px;
  background-color: #50b4ff;
  transform: rotate(45deg);
  margin-right: 8px;
}

.workload-title {
  color: #50b4ff;
  font-size: 16px;
  margin: 0;
  font-weight: 500;
}

/* 图表容器 */
.workload-chart {
  width: 100%;
  height: calc(100% - 45px);
  /* 减去标题区域高度 */
}

// 左边4的样式
/* 主容器 - 固定尺寸 */
.annual-workload-table {
  width: 600px;
  height: 220px;
  // background-color: #0a1e4c;
  padding: 15px 18px;
  box-sizing: border-box;
  overflow: hidden;
}

/* 标题区域 */
.table-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(70, 170, 255, 0.2);
}

/* 菱形图标 */
.diamond-sign {
  width: 12px;
  height: 12px;
  background-color: #46aaff;
  transform: rotate(45deg);
  margin-right: 8px;
}

.table-title {
  color: #46aaff;
  font-size: 16px;
  margin: 0;
  font-weight: 500;
}

/* 表格容器 */
.table-container {
  width: 100%;
  height: calc(100% - 40px);
  /* 减去标题区域高度 */
  overflow: hidden;
}

/* 表格样式 */
.workload-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  /* 固定列宽布局 */
  height: 100%;
}

/* 表头行 */
.table-header-row {
  background-color: rgba(70, 170, 255, 0.1);
}

/* 表头单元格 */
.workload-table th {
  color: #8ec5fc;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 5px;
  text-align: left;
  border: 1px solid rgba(70, 170, 255, 0.15);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 表体行 */
.table-body-row {
  background-color: rgba(70, 170, 255, 0.05);
}

.table-body-row:nth-child(even) {
  background-color: rgba(70, 170, 255, 0.03);
}

/* 表体单元格 */
.workload-table td {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  padding: 8px 5px;
  border: 1px solid rgba(70, 170, 255, 0.15);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 状态单元格 */
.status-cell {
  color: #46aaff;
}

/* 列宽分配（按内容比例） */
.workload-table th:nth-child(1),
.workload-table td:nth-child(1) {
  width: 10%;
}

.workload-table th:nth-child(2),
.workload-table td:nth-child(2) {
  width: 15%;
}

.workload-table th:nth-child(3),
.workload-table td:nth-child(3) {
  width: 15%;
}

.workload-table th:nth-child(4),
.workload-table td:nth-child(4) {
  width: 15%;
}

.workload-table th:nth-child(5),
.workload-table td:nth-child(5) {
  width: 15%;
}

.workload-table th:nth-child(6),
.workload-table td:nth-child(6) {
  width: 10%;
}

// 中间2的样式
/* 主容器 - 固定尺寸（600×3750） */
.ticket-trend-container {
  width: 600px;
  height: 375px;
  /* 注意：此高度较大，可能需要容器支持滚动 */
  // background-color: #0a143c;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

/* 标题区域 */
.trend-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 90, 140, 0.2);
}

/* 菱形图标 */
.diamond-indicator {
  width: 13px;
  height: 13px;
  background-color: #3cb4ff;
  transform: rotate(45deg);
  margin-right: 9px;
}

.trend-title {
  color: #3cb4ff;
  font-size: 17px;
  margin: 0;
  font-weight: 500;
}

/* 图表容器 */
.trend-chart {
  width: 100%;
  /* 减去标题区域高度 */
  height: 90%;
}

// 中间3的样式
/* 主容器 - 固定尺寸 */
.hall-realtime-container {
  width: 600px;
  height: 375px;
  // background-color: #081c44;
  padding: 18px 20px;
  box-sizing: border-box;
}

/* 标题区域 */
.realtime-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(60, 170, 255, 0.2);
}

/* 菱形图标 */
.diamond-marker {
  width: 13px;
  height: 13px;
  background-color: #3caaff;
  transform: rotate(45deg);
  margin-right: 9px;
}

.realtime-title {
  color: #3caaff;
  font-size: 17px;
  margin: 0;
  font-weight: 500;
}

/* 表格滚动容器 */
.table-scroll-wrapper {
  width: 100%;
  height: calc(100% - 50px);
  /* 减去标题高度 */
  overflow-y: auto;
}

/* 自定义滚动条 */
.table-scroll-wrapper::-webkit-scrollbar {
  width: 6px;
}

.table-scroll-wrapper::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.table-scroll-wrapper::-webkit-scrollbar-thumb {
  background: rgba(60, 170, 255, 0.3);
  border-radius: 3px;
}

/* 表格样式 */
.realtime-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* 表头行 */
.table-head-row {
  background-color: rgba(60, 170, 255, 0.15);
}

/* 表头单元格 */
.realtime-table th {
  color: #66b2ff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 8px;
  text-align: left;
  border: 1px solid rgba(60, 170, 255, 0.15);
  position: sticky;
  top: 0;
  z-index: 2;
}

/* 表体行 */
.table-body-row {
  background-color: rgba(60, 170, 255, 0.03);
}

.table-body-row:nth-child(even) {
  background-color: rgba(60, 170, 255, 0.05);
}

/* 表体单元格 */
.realtime-table td {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  padding: 10px 8px;
  border: 1px solid rgba(60, 170, 255, 0.1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 业务名称列（单独调整宽度） */
.business-name {
  width: 200px;
}

/* 等待人数警告样式（超过5人高亮） */
.warning-count {
  color: #ff6b6b;
  font-weight: 600;
}

/* 列宽分配 */
.realtime-table th:nth-child(1),
.realtime-table td:nth-child(1) {
  width: 100px;
}

.realtime-table th:nth-child(3),
.realtime-table td:nth-child(3) {
  width: 120px;
}

.realtime-table th:nth-child(4),
.realtime-table td:nth-child(4) {
  width: 100px;
}

// 右边2的样式
/* 主容器 - 固定尺寸 */
.satisfaction-container {
  width: 600px;
  height: 200px;
  // background-color: #0a1e4c;
  padding: 18px 22px;
  box-sizing: border-box;
}

/* 标题区域 */
.satisfaction-header {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(60, 180, 255, 0.2);
}

/* 菱形图标 */
.diamond-symbol {
  width: 12px;
  height: 12px;
  background-color: #3cb4ff;
  transform: rotate(45deg);
  margin-right: 8px;
}

.satisfaction-title {
  color: #3cb4ff;
  font-size: 16px;
  margin: 0;
  font-weight: 500;
}

/* 内容区域 */
.satisfaction-content {
  display: flex;
  align-items: center;
  height: calc(100% - 50px);
  gap: 40px;
}

/* 平均满意率 */
.avg-satisfaction {
  text-align: center;
  min-width: 120px;
}

.rate-value {
  color: #ffffff;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 5px;
  line-height: 1;
}

.rate-label {
  color: skyblue;
  font-size: 18px;
  font-weight: bold;
}

/* 满意度分布 */
.satisfaction-distribution {
  flex: 1;
}

/* 分布线容器 */
.distribution-line {
  position: relative;
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

/* 连接线 */
.connecting-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
      #38c172 0%,
      #4dc0b5 25%,
      #f6c343 50%,
      #9f7aea 75%,
      #e53e3e 100%);
  z-index: 1;
}

/* 分布点样式 */
.distribution-point {
  position: relative;
  z-index: 2;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
}

/* 点上方数值 */
.point-value {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  white-space: nowrap;
}

/* 点下方标签 */
.point-label {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  white-space: nowrap;
}

/* 响应式调整 */
@media (max-width: 600px) {
  .point-label {
    font-size: 11px;
  }

  .point-value {
    font-size: 12px;
  }
}

// 右边3的样式
/* 主容器 - 固定尺寸 */
.performance-ranking-container {
  width: 600px;
  height: 350px;
  padding: 20px 25px;
  box-sizing: border-box;
  border: 1px solid rgba(66, 153, 225, 0.2);
}

/* 标题区域 */
.ranking-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(66, 153, 225, 0.2);
}

/* 菱形图标 */
.diamond-badge {
  width: 13px;
  height: 13px;
  background-color: #4299e1;
  transform: rotate(45deg);
  margin-right: 9px;
}

.ranking-title {
  color: #4299e1;
  font-size: 17px;
  margin: 0;
  font-weight: 500;
}

/* 排名列表容器 */
.ranking-list {
  height: calc(100% - 55px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding-right: 5px;
}

/* 自定义滚动条 */
.ranking-list::-webkit-scrollbar {
  width: 6px;
}

.ranking-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.ranking-list::-webkit-scrollbar-thumb {
  background: rgba(66, 153, 225, 0.3);
  border-radius: 3px;
}

.ranking-list::-webkit-scrollbar-thumb:hover {
  background: rgba(66, 153, 225, 0.5);
}

/* 单个排名项 */
.ranking-item {
  display: flex;
  align-items: center;
  padding: 15px 12px;
  background-color: rgba(66, 153, 225, 0.05);
  border: 1px solid rgba(66, 153, 225, 0.1);
  border-radius: 4px;
}

/* 排名序号 */
.rank-number {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 18px;
  position: relative;
}

/* TOP标签 */
.rank-label {
  // position: absolute;
  bottom: 3px;
  font-size: 10px;
  font-weight: normal;
  opacity: 0.9;
}

/* 详情内容 */
.rank-details {
  flex: 1;
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
}

/* 窗口信息 */
.window-info {
  width: 120px;
}

/* 部门信息 */
.dept-info {
  flex: 1;
  margin: 0 10px;
}

/* 分数信息 */
.score-info {
  width: 120px;
  text-align: right;
  color: #63b3ed;
  font-weight: 500;
}

// 右边4的样式
/* 主容器 - 固定尺寸 */
.excellent-staff-container {
  width: 600px;
  height: 200px;
  // background-color: #0a1e4c;
  padding: 18px 20px;
  box-sizing: border-box;
}

/* 标题区域 */
.staff-header {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(60, 180, 255, 0.2);
}

/* 菱形图标 */
.diamond-emblem {
  width: 12px;
  height: 12px;
  background-color: #3cb4ff;
  transform: rotate(45deg);
  margin-right: 8px;
}

.staff-title {
  color: #3cb4ff;
  font-size: 16px;
  margin: 0;
  font-weight: 500;
}

/* 员工列表容器 */
.staff-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: calc(100% - 50px);
  gap: 10px;
}

/* 员工卡片 */
.staff-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
}

/* 员工头像 */
.staff-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: rgba(60, 180, 255, 0.1);
  margin-bottom: 10px;
  border: 2px solid rgba(60, 180, 255, 0.3);
}

/* 员工信息 */
.staff-info {
  text-align: center;
}

/* 部门文本 */
.dept-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  margin-bottom: 3px;
}

/* 工号文本 */
.id-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  margin-bottom: 3px;
}

/* 姓名文本 */
.name-text {
  color: #3cb4ff;
  font-size: 13px;
  font-weight: 500;
}

</style>
